Web Components

code:javascript

class MyComponent extends HTMLElement {

constructor() {

super();

this.shadow = this.attachShadow({ mode: "open" });

}

connectedCallback() {

this.shadow.innerHTML = `

<p>Hello from a web component!</p>

<style>

p {

color: pink;

font-weight: bold;

padding: 1rem;

border: 4px solid pink;

}

</style>

`;

}

}